import Taro, { Component } from '@tarojs/taro'
import { View, Image, ScrollView } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'
import '@/styles/common/coupon-one.scss'
import couponActive from '@/assets/icon/my_coupon_active.png'
import { formatTime } from '@/utils/utils'

interface IProps {
  item: string // 选择的优惠券
  list: Array<Object> //  优惠券列表
  isOpened: boolean //  显示隐藏
  onClose: Function //  取消事件
  onConfirm: Function //  确定选择优惠券
}

export default class CouponSelect extends Component<IProps, {}> {
  props: any
  static options = {
    addGlobalClass: true
  }

  /**
   * 确定选择
   */
  onConfirm(i) {
    const { onClose, onConfirm } = this.props
    onClose()
    onConfirm(i)
  }

  render() {
    const { item, list=[], isOpened, onClose } = this.props
    // @ts-ignore
    return (<View className='coupon-select' catchtouchmove>
      <View className={classNames('fy-transition fade fy-mask', isOpened && 'show')} onClick={() => onClose()}/>
      <View className={classNames('coupon-popup fy-transition slide-bottom fy-popup fy-popup--bottom fy-popup--round', isOpened && 'show')}>
        <View className='coupon-head d-f a-i-c j-c-c'>
          <View className='head-title'>优惠券</View>
          <View className='bnn-icon close-icon' onClick={() => onClose()}>&#xe646;</View>
        </View>
        <ScrollView scrollY className='coupon-list'>
          {list.map(i => {
            return (<View key={i.id} className='coupon-item coupon-one'>
              <View className='coupon-left'>
                <Image src={couponActive} className='coupon-img'/>
                <View className='coupon-price bnn-number d-f a-i-b'>
                  <View className='price-unit'>￥</View>{i.amount}
                </View>
              </View>
              <View className='coupon-right'>
                <View className='coupon-top thin-border__b f-g-4'>
                  <View className='coupon-name t-o-e-2'>{i.title}</View>
                </View>
                <View className='coupon-bottom d-f a-i-c j-c-b'>
                  <View className='coupon-time'>{formatTime(i.totime, 'YYYY-MM-DD')}</View>
                  {i.id === item.id && <View className='coupon-btn f-g-5 disabled' hoverClass='hover-class--btn' onClick={this.onConfirm.bind(this, i)}>不使用</View>}
                  {i.id !== item.id && <View className='coupon-btn f-g-5' hoverClass='hover-class--btn' onClick={this.onConfirm.bind(this, i)}>立即使用</View>}
                </View>
              </View>
            </View>)
          })}
        </ScrollView>
      </View>
    </View>)
  }
}
